// <template>
//   <div class="app-container" >
//     <div style="line-height: 40px; font-weight: 700; font-size: 22px;  margin-left: 10px;"> 订单列表</div>

//     <el-form :inline="true" class="demo-form-inline">
//       <el-form-item>
//         <el-input v-model="orderQuery.teacher_name" placeholder="讲师名称(班级查询)"/>
//       </el-form-item>

//       <el-form-item>
//         <el-select v-model="orderQuery.status" clearable placeholder="订单状态">
//           <el-option value="1" label="已支付"/>
//           <el-option value="0" label="未支付"/>
//         </el-select>
//       </el-form-item>

//       <el-button type="primary" plain="true" icon="el-icon-search" @click="getList()">查询</el-button>
//       <el-button type="default" plain="true" @click="resetData()">清空</el-button>
//     </el-form>
    
//     <el-table
//       :data="list"
//       border
//       fit
//       highlight-current-row
//       >
      

//       <el-table-column
//         label="序号"
//         width="70"
//         align="center"
//         >
//         <template slot-scope="scope">
//           {{ (current - 1) * limit + scope.$index + 1 }}
//         </template>
//       </el-table-column>

//       <el-table-column prop="orderNo" label="订单编号" width="200"  align="center"/>

//       <el-table-column prop="courseTitle" label="课程名称" width="300"  align="center"/>

//       <!-- <el-table-column prop="teacher_name" label="讲师" width="150"  align="center"/> -->

//       <el-table-column prop="mobile" label="用户电话"  align="center"/>

//       <el-table-column prop="totalFee" label="消费" width="100"  align="center"/>

//       <el-table-column label="订单状态" width="150 " align="center">
//         <template slot-scope="scope">
//           {{ scope.row.status===1?'订单已支付':'订单未支付' }}
//         </template>
//       </el-table-column>

//       <el-table-column prop="gmtCreate" label="创建时间" width="160" align="center"/>



//     </el-table>

//   <!-- 分页 -->
//     <el-pagination :current-page="current" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;"
//       layout="total, prev, pager, next, jumper" @current-change="getList" />

//   </div>
// </template>
<script>
//引入调用teacher.js文件
import orderApi from '@/api/order/order'

export default {
    //写核心代码位置
    // data:{
    // },
    data() { //定义变量和初始值
        return {
          list: null, //查询之后接口返回集合
          current: 1, //当前页
          limit: 10, //每页记录数
          total: 0, //总记录数
          orderQuery:{} //条件封装对象
        }
    },
    created() { //页面渲染之前执行，一般调用methods定义的方法
        //调用

        this.getList() 
    },
    methods:{  //创建具体的方法，调用teacher.js定义的方法
        getList(current=1) {
            this.current = current
            orderApi.getOrderList(this.current, this.limit, this.orderQuery)
                .then(response => {//请求成功
                    //response接口返回的数据
                    //console.log(response)
                    this.list = response.data.records
                    this.total = response.data.total
                }) 
        },
        resetData() {//清空的方法
            //表单输入项数据清空
            this.orderQuery = {}
            //查询所有讲师数据
            this.getList()
        }
    }
}
</script>
